<!DOCTYPE html>
<html ng-app="zhxLd">
<head>
	<meta charset="UTF-8">
	<title>ZHX Loading Plugin</title>

	<link rel="stylesheet" href="lib/zhx-loading/zhx-loading.min.css">

	<script src="lib/jquery/dist/jquery.min.js"></script>
	<script src="lib/angular/angular.js"></script>
	<script src="lib/velocity/velocity.min.js"></script>

	<script src="lib/zhx-loading/zhx-loading.js"></script>

	<script src="js/app.js"></script>

	<style>
		html,body{
			padding:0 20px;
		}

		button {
			padding: 5px;
		}

		body > div {
			display: flex;
			align-items: center;
			justify-content: center;	
			border: 1px solid #cbcbcb;
		}
		.div1{
			width: 300px;
			height: 150px;
		}
		.div2{
			width: 600px;
			height:200px;
		}
		.div3{
			width: 900px;
			height: 200px;
		}
	</style>
</head>
<body ng-controller="zhxLdCtrl">
	<h2>zhx Loading Plugin</h2>

	<button ng-click="showBodyLoading(true)">show Loading in Body</button>
	<button ng-click="showTargetLoading('div1')">show Loading in div1</button>
	<button ng-click="showTargetLoading('div2','NOW LOADING...')">show Loading in div2 with TEXT</button>
	<button ng-click="showTargetLoading('div3')">show Loading in div3</button>

	<p>please wait for 3 seconds to close zhxLoading automatically.</p>

	<div class="div1" id="div1">This is div1 target</div>

	<p></p>

	<div class="div2" id="div2">div2</div>

	<p></p>

	<div class="div3" id="div3">DIV3</div>

</body>
</html>